iT邦幫忙

0

CMoney軟體工程師戰鬥營_Vue框架_Week 15

  • 分享至 

  • xImage
  •  

歐拉~
本週結束了分領域
雖然每週都為了Web的演示以及龐大的作業量追著跑
但是結束並沒有感到鬆一口氣
因為接下來迎接我的就是



期末專題拉!
真的同時被 學習前端技術 & 準備期末專題 搞得焦頭爛額T_T

本週最後一次的前端內容是教有名的框架:Vue
以下提供不專業筆記:

運作方式

  • index.html:所有的內容都會從 src 中打包注入到 id 為 app 的 div 下方。
  • main.js:所有 vue.js 的進入點,也就是注入 index.html 的主檔案。主要是 import App.vue 作為 component 使用。
  • App.vue:專案的主檔。規劃共用與非共用區域。
    • 裡面有三種檔案類型:template掌管HTML, Script掌管JS, Style掌管CSS

元件名稱大寫開頭

import引用(印用某一套件,但還不能使用)→components註冊→template使用(定義成標籤)

CSS有個屬性→幫你產生亂碼名字,就不會讓className與別人重複

Vue語法

字串模板

  • {{與資料綁定的變數名稱}}

  • v-text="與資料綁定的變數名稱"

  • v-html="與資料綁定的變數名稱"

    • ex

      <h1>{{ msg }}<h1>
      <p v-text="msg"></p>//=elem.textContent="...";
      <p v-html="htmlcode"></p>//=elem.innerHTML=`...`;
      
  • 屬性綁定

    • v-bind:src="與資料綁定的變數名稱"

    • :src="與資料綁定的變數名稱"

    • ex

      <img v-bind:src="src" v-bind:alt="alt" v-bind:class="className" />
      <img :src="item.src" :alt="item.alt" :class="item.className" />
      
          return {
            msg: "Hello Away",
            htmlCode: `<a href="https://www.cmoney.tw" style="font-size: 1.5em">Link</a>`,
            src: "https://www.wdh2o.idv.tw/wp-content/uploads/2012/12/paper.jpg",
            alt: "Illustrator – 摺紙效果",
            className: "img-resp",
            item: {
              src:
                "https://www.wdh2o.idv.tw/wp-content/uploads/2015/08/ingress_xmp.jpg",
              alt: "Ingress Weapon – Xmp Burster",
              className: "img-nl",
            },
      
  • v-if, v-else, v-show, v-else-if

    v-if 與 v-show 所呈現的視覺化效果是相同的,差異在於:

    • v-show:是利用 CSS 的 inline style 來進行顯示或隱藏。
    • v-if:連 DOM 都不會在網頁中。

    一次性的顯示或隱藏,建議使用 v-if;若是讓使用者切換的顯示或隱藏,建議使用 v-show。

    • ex

      <p v-if="!isMale">男</p>
            <p v-else>女</p>
            <p v-show="isShow">//如果false還是會渲染出來display:none
              v-show 是利用 CSS 的 inline style 來進行顯示或隱藏。
            </p>
      
  • class與style綁定/樣式控制

    • class

      <p :class="{'text-danger': isActive}">文字內容</p>
      
            <div class="box" :class="classList">
              <div class="box__item"></div>
              <div class="box__item"></div>
              <div class="box__item"></div>
            </div>
      return{
      isActive: true,
      classList: {
      	        "box-stack": true,----表示垂直樣式的class是true
              "box-matrix": false,
            },
      }
      
  • 列表渲染

    • v-for

    • ex

      <ul>
           <li v-for="(item, index) in listData" :key="index">{{ item }}</li>
      </ul>
      //(listData: ["html", "rwd", "javascript", "vue", "sass"],)->會藉由v-for逐一列出item
            <div>
              <img
                v-for="(item, index) in ad.picItems"
                :src="item"
                :key="index"
                alt=""
              />
      			</div>
      //picItems: [
                "https://www.wdh2o.idv.tw/wp-content/uploads/2015/12/ingress_guardian.jpg",
                "https://www.wdh2o.idv.tw/wp-content/uploads/2015/08/ingress_xmp.jpg",
                "https://www.wdh2o.idv.tw/wp-content/uploads/2015/08/ingress_intro.jpg",
                "https://www.wdh2o.idv.tw/wp-content/uploads/2013/01/html5.jpg",
                "https://www.wdh2o.idv.tw/wp-content/uploads/2012/12/spry-menu.jpg",
              ],
      
    • 不要同時使用 v-for 與 v-if

      如果這兩項在同一個節點上,v-for 的優先權會比 v-if 更高,也就是 v-if 將會重複執行在每個 v-for 之中。

      • ex

        <ul v-if="listData">
          <li v-for="item in listData"> {{ item }} </li>
        </ul>
        <p v-else> 目前沒有資料 </p>
        
  • computed(在vue裡面是個計算的屬性)

    • ex:篩選出40歲以下的員工

      <ul v-if="computedFilter && computedFilter.length">
              <li v-for="(item, index) in computedFilter" :key="index">
                {{ index }} - {{ item.name }},年齡 {{ item.age }} 歲,專長 {{ item.skill }}
              </li>
            </ul>
      
      computed: {
          computedFilter() {
            return this.employeeData.filter(item => item.age < 40);
          },
      employeeData: [
              { name: "Away", age: 40, skill: "RWD" },
              { name: "Zero", age: 30, skill: "APP" },
              { name: "Jamei", age: 20, skill: "Data Base" },
              { name: "Rick", age: 10, skill: "F2E" },
            ],
      

生命週期

beforeCreate(在元件創造之前)→created(資料在此掛載)→beforeMount(元件建立之前,只有元素外層,像空的div)→mounted(可控制DOM,div裡面內容出現)→資料開始有所變動:beforeUpdate(資料變了,元素還未改變)→updated→beforeDestroy→destroyed元件失效死亡

  • 通常切分頁元件會自動死亡

axios

  • npm install --save axios vue-axios
this.axios.get(api).then((response) => {
  console.log(response.data)
})
--------------or------------------
this.$http.get(api).then((response) => {
  console.log(response.data)
})
post必須是物件
這邊不需要手動轉json
  • ex

    export default {
      name: 'App',
      data(){
        return {
          data: [],
        };
      },
      created() {
        this.$http.get('./static/data.json').then(res => {
          this.data = res.data;
        });
      },
    }
    

元件

記得要記得要運行就要:引入→註冊→掛載到畫面

  • 元件化:將html抽出去

  • 元件包裝:一個vue檔裡面包其他vue檔

  • 向內傳遞

    利用props:[ ]陣列

    • 靜態傳遞:自己在掛載地方更改

    • ex

      //在Pic.vue裡
      <template>
        <figure>
          <img :src="imgSrc">
          <figcaption>{{ imgCaption }}</figcaption>
        </figure>
      </template>
      
      <script>
      export default {
        props:['imgSrc', 'imgCaption'],
      }
      </script>
      //在App.vue裡
      <h2>靜態傳遞</h2>
          <Pic
            img-src="https://www.apple.com/v/mac/home/at/images/overview/compare/macbook_pro_16__x90efpvdutu6_large_2x.jpg"
            img-caption="靜態傳遞的文字內容"
          />
      
    • 動態傳遞:利用資料傳遞

    • ex

      
      //在App.vue裡的HTML
      <h2>動態傳遞</h2>
          <Pic
            :img-src="src"
            :img-caption="title"
          />
      //在App.vue裡的Script
      return {
            src:
              'https://www.apple.com/v/mac/home/at/images/overview/compare/macbook_air__bfz9o93hnyuq_large_2x.jpg',
            title: '動態傳遞的文字內容',
          };
        },
      
  • 向外傳遞

    利用$emit

    • ex

      //在Post元件裡
      <button type="button" @click="$emit('updateSize')">放大文字</button>
      //在App.vue的template裡
      <Post
            :style="{ fontSize: `${textSize1}em` }"
            @updateSize="textSize1 += .1"
          />
      

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/484d74e5-1836-4c69-bfae-96d731e91e42/_2021-06-04_10.31.33.png

事件

Click

  • ex

    在App.vue裡

    <template>
      <div id="app">
        <Click />
        <ClickCounter />
        <ClickToggle />
        <ClickModifier />
        <KeyUp />
      </div>
    </template>
    
    <script>
    import Click from "./components/Click
    export default {
      name: "App",
      components: {
        Click,
      },
    };
    </script>
    

    在Click.vue裡

    <template>
      <div>
        <img
          :src="src"
          :alt="title"
          v-on:click="atClick"----> v-on: 可改成@
        >
      </div>
    </template>
    
    <script>
    export default {
      name: "BaseClick",
      data() {
        return {
          title: "HTML5",
          url: "https://www.wdh2o.idv.tw",
          src: "https://www.wdh2o.idv.tw/images/html5/html5.jpg",
        };
      },
      methods: {
        atClick(e) {
          alert(this.title);
          open(this.url, '_blank');
        },
      },
    };
    </script>
    
  • a標籤按的時候如果沒有網址會重整畫面,我已改他修飾符號.preven取消預設

ClickModifier(修飾符)

  • normal:冒泡,從內向外
  • capture:從外層進來(與冒泡相反)
  • stop:停止傳播
  • self:只會出現自己
  • once:只能使用一次,冒泡出來的東西也不能再使用

KeyUp

  • ex

    在KeyUp.vue裡
    <template>
      <div>
        <h1 class="text-center">Vue - KeyUp</h1>
        <h2>enter</h2>
        <div>
          <input type="text" @keyup.enter="atKeyUp('enter')" />
        </div>
    
        <h2>space</h2>
        <div>
          <input type="text" @keyup.space="atKeyUp('space')" />
        </div>
    
        <h2>ctrl + enter</h2>
        <div>
          <input type="text" @keyup.ctrl.enter="atKeyUp('ctrl + enter')" />
        </div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        atKeyUp(m) {
          console.log(m);
        },
      },
    };
    </script>
    

    同場加應本週演示幸運抽到的題目:

computed 與 methods 的差異

Computed

vue的計算屬性

介紹

  • 在 Vue 中 computed 是經常會使用到的屬性,因為在 Vue 中透過 computed 會 cache 住沒有改變的資料,因此正確且適當的使用 computed 將可以減少資料重新運算的次數,讓網頁的效能提升。

基本概念

  • computed 的屬性可以被視為像是 data 一樣,可以讀取和設值分成 getter(讀取) 和 setter(設值),在沒有寫 setter 的情況下,computed 預設只有 getter ,也就是只能讀取,不能改變設值。
  • 特別注意:在getter中需要搭配使用return把值返回出來

基本範例:

  • 預設只有 getter 的 computed

    new Vue({
        computed: {
            computedData: function () {
                return // ...
            }
        }
    })
    
  • 有 setter 和 getter 的 computed

    new Vue({
        computed: {
            computedData: {
                get: function () {
                    return // ...
                },
                set: function () {
                    // ...
                }
            }
        }
    })
    

重頭戲

  • 翻轉字

    <div id="example">
      {{ message.split('').reverse().join('') }}
    </div>
    

→當我們遇到計算過於複雜還會重複使用時候就使用computed

  • 改成computed
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c6277c68-d8e8-4a8a-a83e-29d0ae3fefa5/_2021-06-02_11.05.01.png

注意

  • 不能重複宣告

  • 如果使用箭頭函式的話, this 將指向 window ,而非 Vue

  • 只要 computed property 原始依賴響應的資料 沒有更動,Vue 並不會重新求取 computed property,而是訪問其 緩存結果

    computed: {
      now: function () {
        return Date.now()
      }
    }
    //Date.now() is not a reactive dependency
    

    computed是依照資料來源所連動,Date未經Vue處理過

Computed VS methods

  • 閱讀性

    computed > methods

    在表達上computed就是資料型態,顯示上比較容易辨別

  • Catch

    computed 有Catch!

    假設computed的原始資料來源沒變動,他就只會執行一次,然後把內容catch住,你在跟他要的時候他會直接拿出來回應你。

總結

看完以上的範例,來做個小總結,computed 優點在於由於緩存的特性,一旦使用的大量的計算,在既有響應依賴資料沒有更動的前提下,computed 不會重新計算求值,減少性能上的開銷;

反之,若是有需要隨時更新、不希望緩存的情境,則可以使用 method 替代。


以上就是我本週分領域的筆記~


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言